<template>
	<view class="main">
		<view class="header">
			<view class="in">
				<image src="@/static/img/web1.png" mode=""></image>
				<view class="h1">
					盈利排行榜
				</view>
				<image src="@/static/img/web1.png" mode=""></image>
			</view>
		</view>
		<view class="content">
			<!-- <view class="gonggao">
				<view class="title">
					<image src="@/static/img/web3.png" mode=""></image>
					<text>公告通知</text>
				</view>
				<view class="txt">
					公告
				</view>
			</view> -->
			<view class="rankList">
				<ul>
					<li>
						<view>排名</view>
						<view>姓名</view>
						<view>部门</view>
						<view>单数</view>
						<view>{{ msg }}签单营业额</view>
						<view>当日盈利</view>
						<view>当月盈利</view>
					</li>
					<li v-for="(item,index) in list" :key="index">
						<view class="rank">
							<image v-if="index == 0" src="@/static/img/web4.png" mode=""></image>
							<image v-if="index == 1" src="@/static/img/web5.png" mode=""></image>
							<image v-if="index == 2" src="@/static/img/web6.png" mode=""></image>
							{{index + 1}}
						</view>
						<view>{{item.nickname}}</view>
						<view>{{item.department}}</view>
						<view>{{item.num}}</view>
						<view>{{item.total}}</view>
						<view>{{item.profile}}</view>
						<view>{{item.month_profile}}</view>
					</li>
				</ul>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		webrank
	} from '@/api/inner.js'
	export default{
		data(){
			return{
				list:[],
				msg:'',
				times:null
			}
		},
		onLoad() {
			this.getList()
			this.times = setInterval(() => {
				this.getList()
			},600000)
		},
		onHide() {
			// clearInterval(this.times)
		},
		methods:{
			async getList(){
				this.list = []
				let res = await webrank()
				this.msg = res.msg
				if(res.code == 1){
					res.data.forEach((item,index) => {
						if(index <= 9){
							this.list.push(item)
						}else{
							return
						}
					})
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.main{
		min-height: 100vh;
		display: flex;
		flex-direction: column;
		.header{
			width: 100vw;
			background-color: #000;
			padding: 30px 0;
			background-image: url(@/static/img/web2.png);
			background-size: 100% 100%;
			background-repeat: no-repeat;
			.in{
				display: flex;
				align-items: center;
				justify-content: center;
				.h1{
					font-size: 60px;
					font-weight: 700;
					color: #FFF7D7;
				}
				image{
					width: 60px;
					height: 60px;
				}
			}
		}
		.content{
			flex: 1;
			display: flex;
			padding: 30px 16px;
			background-color: #000;
			.gonggao{
				width: 15%;
				margin-right: 15px;
				display: flex;
				flex-direction: column;
				.title{
					display: flex;
					align-items: center;
					font-size: 24px;
					color: #3D3D3D;
					margin-bottom: 25px;
					image{
						width: 22px;
						height: 19px;
						margin-right: 12px;
					}
				}
				.txt{
					flex: 1;
					background-color: #F6F7FB;
					border-radius: 4px;
					padding: 32px 20px;
				}
			}
			.rankList{
				flex: 1;
				ul{
					display: flex;
					flex-direction: column;
					height: 100%;
					font-size: 35px;
					font-weight: 700;
					color: #fff;
					li{
						height: 10%;
						width: 100%;
						display: flex;
						align-items: center;
						padding: 10px;
						
						view{
							width: 15%;
							height: 100%;
							text-align: center;
							position: relative;
							display: flex;
							align-items: center;
							justify-content: center;
							image{
								position: absolute;
								left: 0;
								height: 100%;
								width: 48px;
							}
						}
					}
					li:nth-child(2n-1){
						background-color: #000;
					}
					li:nth-child(2n){
						background-color: #666;
					}
					li:nth-child(2){
						background: linear-gradient( 90deg, #FF8B63 0%, #666 10%);
					}
					li:nth-child(3){
						background: linear-gradient( 90deg, #FFB482 0%, #000 10%);
					}
					li:nth-child(4){
						background: linear-gradient( 90deg, #FFD595 0%, #666 10%);
					}
				}
			}
		}
	}
</style>